<template>
    <div
        class="list_detail flexcbh"
        :style="{
            left: styleUtil.px2vw(offset_width),
            width: styleUtil.px2vw(dialog_width),
        }"
    >
        <ProTitle2
            :title_type="title_type"
            :btn_list="btn_list"
            :label="title"
            @on_more="onClose"
            :is_more="is_more"
            more="关闭 ×"
        ></ProTitle2>
        <div class="fx1 hidden flexrbh">
            <!-- 左侧 -->
            <div class="left flexcsh" v-if="show_left">
                <div
                    class="left_item pointer flexrcc"
                     :style=" {background: cut_left_num == item.id?'rgba(22, 159, 196, 0.2)':''} "
                    v-for="item in left_arr"
                    :key="item.id"
                    @click="onLeftNav(item.id, item.cut_name)"
                >
                    <span
                        class="w-text fontsize16"
                        :class="
                            cut_left_num == item.id
                                ? 'pro-bgcolor-text fw700'
                                : ''
                        "
                    >
                        {{ item.name }}
                    </span>
                </div>
            </div>
            <div class="fx1">
                <slot />
            </div>

        </div>
    </div>
</template>

<script>
import ProTitle2 from "./ProTitle2";

export default {
    name: "ListDetail",
    components: { ProTitle2 },
    props: {
        title: {
            type: String,
            default: "详情",
        },
        title_type: {
            type: String,
            default: "title",
        },
        is_more: {
            type: Boolean,
            default: true,
        },
        btn_list: {
            type: Array,
            default: () => [],
        },
        // 弹出框的宽度
        dialog_width: {
            type: Number,
            default: 1306,
        },
        offset_width: {
            type: Number,
            default: 528,
        },
        show_left: {
            type: Boolean,
            default: false,
        },
        left_active: {
            type: [Number, String],
            default: 0,
        },
        left_arr: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            cut_left_num: 0,
        };
    },
    computed: {},
    watch: {
    },
    created() {
        this.cut_left_num = this.left_active;
    },
    mounted() {},
    methods: {
        onClose() {
            this.$emit("close_info");
        },
        // onItem(id) {
        //     this.cut_id = id
        // },
        onLeftNav(id, cut_name) {
            this.cut_left_num = id;
            this.$emit("leftNav", id, cut_name);
        },
    },
};
</script>
<style lang="scss" scoped>
.list_detail {
    // position: absolute;
    // background: rgba(9, 24, 39, 0.68);
    // z-index: 190;
    // top: vh(88);
    // bottom: vh(40);
    width: vw(1024);
    height: vh(660);
    background: url("~@/assets/images/proview/w_1380.png") no-repeat 0 0;
    background-size: 100% 100%;
    padding: vw(32);
    .left {
        width: vw(128);
        margin-right: vw(30);
        // background-color: #DEF;
        .left_item {
            width: 100%;
            padding: vh(8) 0;
            border-left: 1px solid rgba(22, 159, 196, 0.25);
            border-right: 1px solid rgba(22, 159, 196, 0.25);
            border-bottom: 1px solid rgba(22, 159, 196, 0.25);
        }
        .left_item:first-child {
            border-top: 1px solid rgba(22, 159, 196, 0.25);
        }
    }
}
</style>
